<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="钟伟杰的个人web前端简历，web前端，简历，前端开发，钟伟杰的简历">
    <meta name="description" content="钟伟杰的web简历，加油吧，骚年~">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
    <title>钟伟杰的个人简历</title>
    <link rel="stylesheet" href="css/cssreset-min.css" type="text/css">
    <link rel="stylesheet" href="css/swiper.min.css" type="text/css">
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <link rel="stylesheet" href="css/animate.min.css" type="text/css">
    <link rel="stylesheet" href="css/s8CyrcleInfoBox.css" type="text/css">
    <link rel="stylesheet" href="css/flowChart.css" type="text/css">
    <script src="js/jquery.min.js" type="text/javascript" rel="script"></script>
</head>
<body id="particles-js">
<header>
    <img src="img/touxiang.jpg" width="70px">
    <ul>
        <li class="navs">首页</li>
        <li class="navs">基本信息</li>
        <li class="navs">技能掌握</li>
        <li class="navs">我的作品</li>
        <li class="navs">联系我</li>
    </ul>
    <div style="clear: both"></div>
</header>

    <div class="swiper-container" >

        <div class="swiper-wrapper" id="s1">

            <div class="swiper-slide" id="text_div">
                <div id="text">
                    <h1>也许，</h1>
                    <h1>前方困难重重，</h1>
                    <h1>但是，</h1>
                    <h1>我也勇往直前。</h1>
                    <h1 class="text_all" style="font-size: 60px;">

                        也许<br>
                        前方困难重重<br>
                        但是<br>
                        我也勇往直前<br>


                    </h1>
                    <p class="nametext">我叫钟伟杰，是一名前端开发zhongjack@qq.com</p>
                </div>

            </div>
            <div class="swiper-slide">
                <div  class=" content ani" swiper-animate-effect="slideInUp">

                    <div class="my_messages">
                        <ul class="circleWrapper wStyle1">
                            <li>
                                <div class="circleFeature fStyle1" data-cyrcleBox="f1">学历</div>
                                <div class="circleBox" id="f1">大学专科</div>
                            </li>
                            <li>
                                <div class="circleFeature fStyle1" data-cyrcleBox="f2">专业</div>
                                <div class="circleBox" id="f2">计算机应用技术</div>
                            </li>
                            <li>
                                <div class="circleFeature fStyle1" data-cyrcleBox="f3">年龄</div>
                                <div class="circleBox" id="f3">22岁</div>
                            </li>
                            <li>
                                <div class="circleFeature fStyle1" data-cyrcleBox="f4">坐标</div>
                                <div class="circleBox" id="f4">广东省惠州市惠城区</div>
                            </li>
                            <li>
                                <div class="circleFeature fStyle1" data-cyrcleBox="f5">工作状态</div>
                                <div class="circleBox" id="f5">目前正在求职</div>
                            </li>
                            <li>
                                <div class="circleFeature fStyle1" data-cyrcleBox="f6">能力</div>
                                <div class="circleBox" id="f6">满足基本企业网站开发</div>
                            </li>
                        </ul>
                    </div>
                    <div id="introduction" >
                        <div style="height: 70px"></div>
                        <img src="img/touxiang.jpg" width="90px" >
                        <div class="line"></div>

                        <p>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;你好，我叫钟伟杰，22岁，惠州人。我是计算机专业的一名应届毕业生，但是专业学的不是前端，但是本人对于前端非常的感兴趣，所以自学了前端，从2017年的11月份开始，目前的目标是找到一份前端工作，目前正在学习Node.js、Vue.js以及bootstrap。本人写过移动端页面，pc端页面。所以大部分的页面本人都可以完成。</p>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;不急躁，喜欢前端，学习能力和执行力都很不错，会点设计，目前比较粗糙（如本站）</p>
                    </div>
                    <div style="clear: both"></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="content">
                    <div class="card">
                        <ul class="card_ul">
                            <li>深刻理解Web标准</li>
                            <li>熟练运用html标签 </li>
                            <li>熟悉使用html5</li>
                        </ul>


                        <div class="card_up">
                                <img class="card_upimg" src="img/html.png">
                            <div class="card_up_img">
                                <img src="img/up.png">
                            </div>
                        </div>
                        <div class="card_down">
                            <h1>HTML</h1>
                        </div>
                    </div>
                    <div class="card">
                        <ul class="card_ul">
                            <li>熟练运用css及css3新属性</li>
                            <li>熟悉并会解决各浏览器的兼容性问题，会使用css hack</li>
                            <li>了解LESS，并正在学习</li>
                            <li>会使用bootstrap框架，目前正在学习</li>
                        </ul>
                        <div class="card_up">
                            <img class="card_upimg" src="img/css.png">
                            <div class="card_up_img">
                                <img src="img/up.png">
                            </div>
                        </div>
                        <div class="card_down">
                            <h1>CSS</h1>
                        </div>
                    </div>
                    <div class="card">
                        <ul class="card_ul">
                            <li>掌握jQuery</li>
                            <li>熟悉javascript的编程</li>
                            <li>掌握javascript dom 编程 </li>
                            <li>正在学习Node.js</li>
                        </ul>
                        <div class="card_up">
                            <img class="card_upimg" src="img/js.png">
                            <div class="card_up_img">
                                <img src="img/up.png">
                            </div>
                        </div>
                        <div class="card_down">
                            <h1>JavaScript</h1>
                        </div>
                    </div>
                    <div class="card">
                        <ul class="card_ul">
                            <li>理解Vue.js的双向数据绑定原理</li>
                            <li>熟悉Vue.js基本的指令运用</li>
                            <li>会使用Vue.js的组件</li>
                            <li>正在学习Vue.js</li>
                        </ul>
                        <div class="card_up">
                            <img class="card_upimg" src="img/vue.png" width="128px">
                            <div class="card_up_img">
                                <img src="img/up.png">
                            </div>
                        </div>
                        <div class="card_down">
                            <h1>Vue.js</h1>
                        </div>
                    </div>
                </div>

            </div>
            <div class="swiper-slide">
                <!--事件时间轴-->
                <div class="flowChart">
                    <!--左侧轴-->
                    <div class="flowChart-left">
                        <!--虚线-->
                        <div class="dashed"></div>
                    </div>
                    <!--右侧内容-->
                    <div class="flowChart-right">
                        <!--一个节点-->
                        <div class="oneNode">
                            <!--左侧小球-->
                            <div class="check check-danger">
                                项目一
                            </div>
                            <div class="tag-boder">
                                <div class="tag">
                                </div>
                            </div>
                            <!--右侧内容-->
                            <div class="NodeDetail ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
                                <!--上-->
                                <div class="NodeDetail-title">
                                    <!--头像-->
                                    <div class="xmuhref">
                                        <h1>牛排美食餐厅网站</h1>
                                        <a href="https://broken-life.gitee.io/niupai/" target="view_window"><img src="img/link.png"  ></a>
                                    </div>
                                    <!--内容-->

                                </div>
                                <!--中-->
                                <div class="NodeDetail-content">


                                    <p>一个使用了HTML和CSS及Jquery完成的网页建设，具有首页，美食简介，店面简介，品牌故事，关于我们等页面，是一个简单的企业项目，耗时3天完成，主要jQuery应用的方面有轮播图，分页器点击切换，tabs标签页切换等常用的js交互，本次项目的js交互没有使用插件，纯手写代码。同时感谢H-ui的样式重置，本项目使用了H-ui的框架的样式重置代码。</p>
                                </div>
                                <!--下-->
                                <div class="NodeDetail-footer">
                                    <span>2018-06-24</span>

                                </div>
                            </div>
                        </div>
                        <div class="oneNode">
                            <!--左侧小球-->
                            <div class="check check-success">
                                项目二
                            </div>
                            <div class="tag-boder">
                                <div class="tag">
                                </div>
                            </div>
                            <!--右侧内容-->
                            <div class="NodeDetail ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s" swiper-animate-delay="0.4s">
                                <!--上-->
                                <div class="NodeDetail-title">
                                    <!--头像-->
                                    <div class="xmuhref">
                                        <h1>咖啡店网站</h1>
                                        <a href="https://broken-life.gitee.io/coffeeshop" target="view_window"><img src="img/link.png"  ></a>
                                    </div>
                                    <!--内容-->

                                </div>
                                <!--中-->
                                <div class="NodeDetail-content">


                                    <p>本站制作使用了HTML和CSS以及使用的jQuery，同时在多次使用CSS3的动画效果，使得网站具有更多的生动性，同时在客户留言这个内容中，使用了jQuery显示与隐藏及定时器，让客户的留言不断的滚动，方便用户浏览。本网站没有使用插件，纯手写。同时本网站在IE9以上、其他浏览器及大多数PC的分辨率上显示的效果一致。</p>
                                </div>
                                <!--下-->
                                <div class="NodeDetail-footer">
                                    <span>2018-06-27</span>

                                </div>
                            </div>
                        </div>
                        <div class="oneNode">
                            <!--左侧小球-->
                            <div class="check check-warning">
                                项目三
                            </div>
                            <div class="tag-boder">
                                <div class="tag">
                                </div>
                            </div>
                            <!--右侧内容-->
                            <div class="NodeDetail ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
                                <!--上-->
                                <div class="NodeDetail-title">
                                    <!--头像-->
                                    <div class="xmuhref">
                                        <h1>购物网上商店</h1>
                                        <a href="https://broken-life.gitee.io/shopping_store" target="view_window"><img src="img/link.png"  ></a>
                                    </div>
                                    <!--内容-->

                                </div>
                                <!--中-->
                                <div class="NodeDetail-content">


                                    <p>本demo是在本人学完jQuery后写的第一个项目，本项目应用了较多js交互，如轮播图、下拉菜单、热门商品的标识、网站颜色的切换及tab标签栏，因为主要在于jQuery的应用，使用网站可能不是特别的美观，图片及商标来源于网上。</p>
                                </div>
                                <!--下-->
                                <div class="NodeDetail-footer">
                                    <span>2018-05-22</span>

                                </div>
                            </div>
                        </div>
                        <div class="oneNode">
                            <!--左侧小球-->
                            <div class="check check-prime">
                                更多
                            </div>
                            <div class="tag-boder">
                                <div class="tag">
                                </div>
                            </div>
                            <!--右侧内容-->
                            <div class="NodeDetail ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s" swiper-animate-delay="0.6s">
                                <!--上-->
                                <div class="NodeDetail-title">
                                    <!--头像-->
                                    <div class="xmuhref">
                                        <h1>更多项目</h1>
                                        <a href="https://gitee.com/Broken-life/events" target="view_window"><img src="img/link.png"  ></a>
                                    </div>
                                    <!--内容-->

                                </div>
                                <!--中-->
                                <div class="NodeDetail-content">


                                    <p>更多项目在码云（gitee）</p>
                                </div>
                                <!--下-->
                                <div class="NodeDetail-footer">
                                    <span>-----</span>

                                </div>
                            </div>
                        </div>

                    </div>
            </div>
        </div>
            <div class="swiper-slide" id="s5">
                <div id="about_me_div">
                    <div id="div_left"></div>
                    <div style="clear: both"></div>
                    <div id="about_me">
                        <p id="title">Contact<span>Me</span></p>
                        <p id="two_txt"><span style="color:#e3723c; ">灵感</span><span style="color: #84c800"> 代码</span><span style="color: #63B8FF"> 梦想</span><span style="color: deeppink"> 未来</span></p>
                        <p id="dream">我有一个梦想：<br>我希望用HTML与CSS写出漂亮的页面<br>用JS成为用户沟通的桥梁<br>我热爱前端，热爱尝试新的事物<br>带上我吧，让我们创造更大的价值</p>
                        <ul id="icon_div">
                            <li><a href="https://gitee.com/Broken-life" target="view_window"><img src="img/码云.png" class="icon"></a></li>
                            <li><a target="_blank" href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=1486844652&website=www.oicqzone.com"><img src="img/qq.png" class="icon"></a></li>
                            <li><a href="https://www.cnblogs.com/ZwjFronTend/"><img src="img/博客园.png" class="icon"></a></li>
                            <li><a href="mailto:zhongjack@qq.com"><img src="img/邮箱%20.png" class="icon"></a></li>
                            <li><a href="https://www.zhihu.com/people/po-sui-d-ren-sheng/activities" target="view_window"><img src="img/知乎.png" class="icon"></a></li>
                        </ul>

                    </div>
                    <div id="div_right"></div>
                </div>
            </div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination" ></div>
    </div>


    <script src="js/swiper.min.js"></script>

<script src="js/particles.min.js"></script>
<script src="js/index.js"></script>
<script src="js/swiper.animate1.0.3.min.js"></script>
<script src="js/s8CyrcleInfoBox.js"></script>
<script>
    $(".my_messages").s8CircleInfoBox({
        hoverStyle:"circleSelect3",
    });

</script>
<script>
    //Swiper滚动代码

    var mySwiper = new Swiper ('.swiper-container', {
        on:{
            init: function(){
                swiperAnimateCache(this); //隐藏动画元素
                swiperAnimate(this); //初始化完成开始动画
            },
            slideChangeTransitionEnd: function(){
                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            }
        },
            direction: 'vertical',
        loop: true,
        mousewheel: true,

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        }

    })
    $('.navs').click(function(){
        var _index = $(this).index();
        mySwiper.slideTo(_index+1, 300, true);
    });


</script>
</body>
</html>